// themes/Theme.js
import { createTheme } from '@mui/material';

const getTheme = (darkMode, isXs = false) => {
  return createTheme({
    palette: {
      mode: darkMode ? 'dark' : 'light',
      primary: {
        main: darkMode ? '#ffffff' : '#000000',
      },
      background: {
        default: darkMode ? '#000000' : '#ffffff',
      },
    },
    typography: {
      allVariants: {
        fontFamily: 'Poppins',
      },
    },
    components: {
      MuiTreeItem: {
        styleOverrides: {
          root: {
            background: 'transparent',
            borderRadius: '12px',
            margin: darkMode ? '4px 0' : 0,
            '&:hover .MuiTreeItem-label': {
              color: '#00fff2',
              textShadow: '0 0 8px #00fff2',
            },
          },
          content: {
            backgroundColor: 'transparent !important',
            background: darkMode
              ? 'linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02))'
              : 'linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(223, 227, 238, 0.6))',
            boxShadow: darkMode
              ? 'inset 1px 1px 2px rgba(0, 0, 0, 0.2), inset -1px -1px 2px rgba(255, 255, 255, 0.05)'
              : 'inset 1px 1px 3px rgba(223, 227, 238, 0.5), inset -1px -1px 3px rgba(255, 255, 255, 0.8)',
            padding: '4px',
            paddingTop: '12px',
            paddingBottom: '12px',
            borderRadius: '12px',
            '&:hover': {
              backgroundColor: 'transparent !important',
            },
            '&.Mui-expanded': {
              backgroundColor: 'transparent !important',
              background: darkMode
                ? 'linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05))'
                : 'linear-gradient(135deg, rgba(223, 227, 238, 0.6), rgba(255, 255, 255, 0.9))',
              '& .MuiTreeItem-label': {
                color: '#00fff2',
                textShadow: '0 0 8px #00fff2',
              },
              '& .MuiSvgIcon-root': {
                color: '#00fff2 !important',
              },
            },
            '&.Mui-focused, &.Mui-selected': {
              backgroundColor: 'transparent !important',
              '& .MuiTreeItem-label': {
                color: '#00fff2',
                textShadow: '0 0 8px #00fff2',
              },
            },
          },
        },
      },
      MuiButton: {
        styleOverrides: {
          root: {
            background: darkMode
              ? 'linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02))'
              : 'linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(223, 227, 238, 0.6))',
            boxShadow: darkMode
              ? 'inset 1px 1px 2px rgba(0, 0, 0, 0.2), inset -1px -1px 2px rgba(255, 255, 255, 0.05)'
              : 'inset 1px 1px 3px rgba(223, 227, 238, 0.5), inset -1px -1px 3px rgba(255, 255, 255, 0.8)',
            borderRadius: '12px',
            padding: '6px 16px',
            color: darkMode ? '#ffffff' : '#000000',
            textTransform: 'none',
            '&:hover': {
              color: '#00fff2',
              textShadow: '0 0 8px #00fff2',
              background: darkMode
                ? 'linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05))'
                : 'linear-gradient(135deg, rgba(223, 227, 238, 0.6), rgba(255, 255, 255, 0.9))',
            },
          },
        },
      },
    },
  });
};

export default getTheme;